<template>
  <div class="app-container">
    <div class="content-card">
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="用户编号">
            <el-input v-model="search1" placeholder="请输入用户编号" clearable>
              <template #prefix><el-icon class="el-input__icon"><Search /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="search2" placeholder="请输入姓名" clearable>
              <template #prefix><el-icon class="el-input__icon"><Search /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="search3" placeholder="请输入电话号码" clearable>
              <template #prefix><el-icon class="el-input__icon"><Search /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="search4" placeholder="请输入地址" clearable>
              <template #prefix><el-icon class="el-input__icon"><Search /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="load">
              <el-icon><Search /></el-icon>查询
            </el-button>
            <el-button @click="clear">
              <el-icon><Refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作按钮 -->
      <div class="operation-bar" v-if="user.role == 1">
        <el-popconfirm title="确认删除选中用户?" @confirm="deleteBatch">
          <template #reference>
            <el-button type="danger" :disabled="!ids.length">
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
          </template>
        </el-popconfirm>
      </div>

      <!-- 数据表格 -->
      <el-table 
        :data="tableData" 
        stripe 
        border 
        @selection-change="handleSelectionChange"
        header-cell-class-name="table-header"
      >
        <el-table-column v-if="user.role == 1" type="selection" width="55" align="center" />
        <el-table-column prop="id" label="用户编号" sortable min-width="100" />
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="nickName" label="姓名" min-width="120" />
        <el-table-column prop="phone" label="电话号码" min-width="120" />
        <el-table-column prop="sex" label="性别" width="80" align="center" />
        <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-popconfirm title="确认删除该用户?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="danger" link>
                  <el-icon><Delete /></el-icon>删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑用户信息" width="500px" destroy-on-close>
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="form.address" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request";
import { ElMessage } from "element-plus";
import { Search, Refresh, Delete, Edit } from '@element-plus/icons-vue'

export default {
  name: 'User',
  components: {
    Search, Refresh, Delete, Edit
  },
  data() {
    return {
      form: {},
      dialogVisible: false,
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      user: {},
      ids: [],
    }
  },
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    this.load()
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = val.map(v => v.id)
    },
    deleteBatch() {
      if (!this.ids.length) {
        ElMessage.warning("请选择数据！")
        return
      }
      request.post("/user/deleteBatch", this.ids).then(res => {
        if (res.code === '0') {
          ElMessage.success("批量删除成功")
          this.load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    },
    load() {
      request.get("user/usersearch", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search1: this.search1,
          search2: this.search2,
          search3: this.search3,
          search4: this.search4,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    clear() {
      this.search1 = ""
      this.search2 = ""
      this.search3 = ""
      this.search4 = ""
      this.load()
    },
    handleDelete(id) {
      request.delete("user/" + id).then(res => {
        if (res.code == 0) {
          ElMessage.success("删除成功")
          this.load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    },
    save() {
      if (this.form.id) {
        request.put("/user", this.form).then(res => {
          if (res.code == 0) {
            ElMessage.success('更新成功')
            this.dialogVisible = false
            this.load()
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        request.post("/user", this.form).then(res => {
          if (res.code == 0) {
            ElMessage.success('添加成功')
            this.dialogVisible = false
            this.load()
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: var(--color-bg-1);
  min-height: calc(100vh - 60px);
}

.content-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-box {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.operation-bar {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.table-header) {
  background-color: var(--color-fill-2) !important;
  color: var(--color-text-1);
  font-weight: 600;
}
</style>
